<!DOCTYPE html>
<html lang="en">
  <head>
	<script async src="js/jquery-1.9.1.min.js"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-126815322-3');
    </script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>typings</title>
    <meta name="description" content="typings.gg is a sleek and modern typing test website. it support many custom themes" />
    <link rel="stylesheet" href="style.css" />
    <link id="theme" rel="stylesheet" href="themes/light.css" />
  </head>
  <body>
    <h2 id="header">typings</h2>
    <div id="command-center" class="">
      <div class="bar">
        <div id="left-wing">
          <span id="word-count">
            <span id="wc-10" onclick="setWordCount(10)">10</span>
            <text> / </text>
            <span id="wc-25" onclick="setWordCount(25)">25</span>
            <text> / </text>
            <span id="wc-50" onclick="setWordCount(50)">50</span>
            <text> / </text>
            <span id="wc-100" onclick="setWordCount(100)">100</span>
            <text> / </text>
            <span id="wc-250" onclick="setWordCount(250)">250</span>
          </span>
          <span id="time-count">
            <span id="tc-15" onclick="setTimeCount(15)">15</span>
            <text> / </text>
            <span id="tc-30" onclick="setTimeCount(30)">30</span>
            <text> / </text>
            <span id="tc-60" onclick="setTimeCount(60)">60</span>
            <text> / </text>
            <span id="tc-120" onclick="setTimeCount(120)">120</span>
            <text> / </text>
            <span id="tc-240" onclick="setTimeCount(240)">240</span>
          </span>
        </div>
        <div id="right-wing">WPM: XX / ACC: XX</div>
      </div>
      <div id="typing-area">
        <div id="text-display"></div>
        <div class="bar">
          <input id="input-field" type="text" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" tabindex="1"/>
          <button id="redo-button" onclick="setText(event)" tabindex="2">redo</button>
        </div>
      </div>
    </div>
    <div id="theme-center" class="hidden">
      <div id="left-wing" onClick="hideThemeCenter();">< back</div>
      <div id="theme-area"></div>
    </div>
    <div id="footer">
      <div id="show-themes" class="button" onClick="showThemeCenter();" tabindex="4">themes</div> /
      <div>
        <select id="show-lang" class="select-color" style="color=oxffff">
		<option></option>
		</select>
	  </div>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

